<template>
  <!-- index页面 -->
  <div id="index">
    <el-container>
      <el-header>
        <my-header></my-header>
      </el-header>
      <el-container style="margin: 0px 60px 0px 60px;padding: 0px;">
        <el-main>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
        <el-aside width="320px">
          <my-aside></my-aside>
        </el-aside>
      </el-container>
      <el-footer>
        <my-footer></my-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from '@/views/header/Header.vue'
import Aside from '@/views/aside/Aside.vue'
import Footer from '@/views/footer/Footer.vue'

export default {
    components: {
        'my-header': Header,
        'my-footer': Footer,
        'my-aside': Aside
    },
    name: 'index',

    data () {
        return {}
    },
    methods: {},
    mounted () {
    }
}
</script>

<style scoped>
#index {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color:#f5f5db;
}

.el-header {
  width: 100%;
  height: 50px !important;
  line-height: 50px;
  padding: 0px;
  margin: 0px;
  color: #fff;
  text-align: center;
  background-color: #1c2327;
  /* 固定 */
  position: fixed;
  top: 0px;
  z-index: 99;
}

.el-main {
  margin: 60px 10px 0px 0px;

}

.el-card__body,
.el-main {
  padding: 0px;
}

.el-aside {
  margin-top: 60px;
}

.el-footer {
  width: 100%;
  margin: 0px;
  padding: 0px;
  color: #fff;
  text-align: center;
  background-color: #373d41;

}

/* slide */
/*  .slide-enter-active,
.slide-leave-active {
  transition: all .3s;
} */

/* fade */
/*  .fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
} */

/*  .fade-enter,
.fade-leave-to {
  opacity: 0;
  width: 100px;
} */

/* bounce */
/*  .bounce-enter-active {
  animation: bounce-in .5s;
}

.bounce-leave-active {
  animation: bounce-in .5s reverse;
} */

/*  @keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
} */
</style>
